<template>
  <div class="noKeep">
    <h5>关注你感兴趣的人</h5>
    <div class="people">
      <ul>
        <li @click="keep(index)" v-for="(item, index) of keeplist" :key="index">
          <p>1111</p>
          <span>{{item.name}}</span>
          <span>{{item.span}}</span>
          <i class="iconfont icon-duihao" v-show="item.hide"></i>
        </li>
        <!-- <li>
          <p>1111</p>
          <span>我有一只猫</span>
          <span>生活达人</span>
          <i class="iconfont icon-duihao"></i>
        </li>
        <li>
          <p>1111</p>
          <span>我有一只猫</span>
          <span>生活达人</span>
          <i class="iconfont icon-duihao"></i>
        </li> -->
      </ul>
      <!-- <button @click="allkeep">一键关注</button> -->
      <router-link to="/gz" tag="button">一键关注</router-link>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      //  1.hide:true,
      hide:true,
      keeplist: [{
        name: '我有一只猫',
        span: '生活达人',
        hide:true
      }, {
        name: '我有一只猫',
        span: '生活达人',
        hide:true
      }, {
        name: '我有一只猫',
        span: '生活达人',
        hide:false
      }, {
        name: '我有一只猫',
        span: '生活达人',
        hide:true
      }]
    }   
  },
  methods: {
    keep (index) {
      // show(index) = !show(index)
      // this.show = !this.show
      this.$emit("get",this.keeplist)
      this.keeplist[index].hide=!this.keeplist[index].hide
      console.log(index)
      // console.log(this)
    }
    // allkeep () {

    // }
  }
}
</script>

<style lang="scss" scoped>
@import '@/lib/reset.scss';
.noKeep {
  @include rect(100%, 100%);
  // @include background-color(#f8f8f8);
  h5 {
    @include rect(40%, 0.24rem);
    @include background-color(#f8f8f8);
    @include font-size(0.1rem);
    @include text-color(#a4a2a2);
    @include margin(0rem 30% 0.1rem);
    @include font-weight(100);
    @include flexbox();
    @include justify-content();
    @include align-items();
  }
  .people {
    @include rect(96%, 100%);
    @include margin(0 2%);
    @include background-color(#f8f8f8);
    position: relative;
    ul {
      @include rect(90%, 87%);
      @include margin(0 5%);
      // background:red;
      li {
        @include rect(0.74rem, 1.22rem);
        // background:yellow;
        float: left;
        margin:0.17rem;
        @include flexbox();
        @include justify-content();
        @include align-items();
        @include flex-direction(column);
        position: relative;
        p {
          @include rect(0.74rem, 0.74rem);
          border-radius: 50%;
          background:#d9d9d9;
          @include flexbox();
          @include justify-content();
          @include align-items();
        }
        span {
          @include rect(0.74rem, 0.2rem);
          line-height: 0.2rem;
          color:#a6a4a4;
          font-size: 0.12rem;
        }
        i {
          position: absolute;
          top:0;
          right:0;
          color:#F7A226;
          font-weight: 900;
          // display: none;
        }
      }
    }
    button {
      @include rect(40%, 0.4rem);
      @include background-color(#D7D5D5);
      @include text-color(#444);
      @include font-size(0.16rem);
      border-radius:0.26rem;
      border:0;
      margin:0% 30% 10%;
      // position: fixed;
      // bottom:5%;
      // left:30%;
    }
  }
  
}
</style>
